<template>
	<div class="video" ref='videoDiv' @mouseenter="enter()" @mouseleave="leave()">
		<video-content ref='videoCon' @videoPlay='appPlay' :is-all-expand='isExpand' :eyeShow='eyeShow' 
		:is-show='isShow' :isEnd='isEnd' @allExpand='allExpand' >
		</video-content>
		<video-controls @replay='replay' @allExpand='allExpand' @iplay='appPlay' @imute='imute' v-show='1'
		 :is-show="isShow" :is-play='isPlay' :eyeShow='eyeShow'>
			<volume-progress ref='volume' :dragend='dragend'></volume-progress>
		</video-controls>
		<video-progress @vProgress='vProgress' ref='myprogress'></video-progress>
	</div>
</template>

<script>
	import VideoControls from 'videosbase/VideoControls'
	import VideoProgress from 'videosbase/VideoProgress'
	import VolumeProgress from 'videosbase/VolumeProgress'
	import VideoContent from 'videosbase/VideoContent'

	export default {
		name: 'Video',
		data() {
			return {
				isPlay: true,
				isShow: false,
				timer: '',
				myVideo: '',
				isEnd: false,
				isExpand: true,
				eyeShow: true,
			}
		},
		components: {
			VideoControls,
			VideoProgress,
			VolumeProgress,
			VideoContent
		},
		mounted() {
			// 存一个常用到的video视频标签
			this.$nextTick(() => {
				this.myVideo = this.$refs.videoCon.$el.children[0]
			})
		},
		methods: {
			allExpand(isAllExpand) {
				this.eyeShow = !isAllExpand
				let videoCanvas = this.$refs.videoCon.$el.children[1]
				if (isAllExpand) { // 全屏
					this.$refs.videoDiv.requestFullscreen()
					// 等videoDiv全屏显示之后再对canvas放大到全屏
					this.$nextTick(() => {
						let width = window.innerWidth
						// console.log(width) // 2275.56
						videoCanvas.style.width = "2275.56px"
					})
				}else { // 退出全屏
					document.webkitCancelFullScreen()
					videoCanvas.style.width = "800px"
				}
			},
			// 点击改变视频进度
			vProgress(e) {
				let mouseX = e.clientX - this.$root.$el.offsetLeft
				let progress = mouseX / this.$refs.videoCon.$el.children[1].offsetWidth 
				console.log("进度条宽度："+  this.$refs.videoCon.$el.children[1].offsetWidth )
				console.log("百分比："+ progress)
				this.changeProgress(progress, true)
				this.appPlay(true)
			},
			// 自动播放视频 进度移动函数
			autoProgress() {
				let length = this.myVideo.currentTime / this.myVideo.duration
				this.changeProgress(length)
			},
			// 视频进度变化
			changeProgress(progress, change) {
				let myVideo = this.myVideo
				
				// 进度条
				let line = this.$refs.myprogress.$el.children[0]
				//设置进度条长度
				line.style.width = progress * 100 + '%'
				// 如果是用户改变视频进度 则改变视频的currentTime值
				if (change) {
					myVideo.currentTime = myVideo.duration * progress
				}
				// 播放结束 清除定时器
				myVideo.onended = () => {
					this.closeVideo()
				}
			},
			// 播发
			appPlay(click) {
				// 隐藏 视频已经结束 提示
				this.isEnd = false
				if (click) { // 若是用户点击时直接播放
					this.myVideo.play()
					this.isPlay = false
				} else { // 若是普通播放 则判断播放/暂停
					this.isPlay ? this.myVideo.play() : this.myVideo.pause()
					this.isPlay = !this.isPlay
				}
				// 播放时每隔0.5秒调用一个进度条控制函数
				this.timer = setInterval(this.autoProgress, 500)
			},
			// 控制音量进度
			dragend(e) {
				let circle = this.$refs.volume.$el
				let volume = this.$el.childNodes[2].childNodes[6].offsetLeft
				// app的左边距  this.$el.offsetLeft
				// 音量框的左边距 volume
				// 音量进度条的左边距 circle.offsetLeft
				let volumeLeft = this.$root.$el.offsetLeft + volume + circle.offsetLeft
				// 移动音量圆点
				let newLeft = e.clientX - volumeLeft
				// console.log(newLeft)
				if (newLeft <= 0) newLeft = 0
				if (newLeft >= 70) newLeft = 70
				circle.children[0].style.left = newLeft + 'px'
				// 通过音量圆点的在进度框中的位置来设置对应的音量
				this.myVideo.volume = (newLeft / 70).toFixed(1)
			},
			// 静音函数
			imute(volume) {
				volume ? this.myVideo.muted = true : this.myVideo.muted = false
			},
			// 重播函数
			replay() {
				this.isEnd = false
				this.myVideo.currentTime = 0
				this.myVideo.play()
				this.isPlay = false
			},
			// 播放结束
			closeVideo(){
				this.isPlay = true
				this.isEnd = true
				clearInterval(this.timer)
			},
			// 移入展示播放导航
			enter() {
				this.isShow = !this.isShow
			},
			// 移入隐藏播放导航
			leave() {
				this.isShow = !this.isShow
			}
		},
	}
</script>

<style>
.video {
	position: relative;
}
/* 响应式 */
@media screen and (min-width: 0px) and (max-width: 500px) {
	.video {
	}
}
@media screen and (min-width: 500px) and (max-width: 3000px) {
	.video {
		float: left;
	}
}
</style>
